new Vue({
    el: '#app',
    data() {
        return {
            SkuData: [], //skudata
            Specs: "", //添加的规格值
            attribute: "", //添加的参数值
            checkedAttr: [], //勾选详情
            SpecsList: [
                { key: '颜色', value: ["黑", "白"], checkedAttr: [] },
                { key: '尺寸', value: ["14寸", "15寸"], checkedAttr: [] },
                { key: '储存盘', value: ["固态", "机械"], checkedAttr: [] },
            ], //规格详情
            spanArr: [],
            operationData: [
                { price: "", stock: "" }
            ]
        }
    },
    created() {},
    computed: {
        table() {
            var data = this.SkuData;
            return data
        }
    },
    watch: {
        SkuData(newVal, oldVal) {
            // this.getSpanArr(newVal)
        }
    },
    methods: {
        //添加规格
        addSpecs() {
            var that = this;
            var val = that.Specs;
            var list = that.SpecsList;
            if (val) {
                if (list.length > 0) {
                    for (var i = 0; i < list.length; i++) {
                        if (list[i].key == val) {
                            alert('名称重复')
                            that.Specs = '';
                            return
                        }
                    }
                    list.push({
                        "key": val,
                        "value": [],
                        "checkedAttr": []
                    })
                    that.Specs = '';
                } else {
                    list.push({
                        "key": val,
                        "value": [],
                        "checkedAttr": []
                    })
                    that.Specs = '';
                }
            } else {
                alert('不能为空')
            }
            that.SpecsList = list;
        },
        //添加参数
        addAttribute(value, i) {
            console.log(this.attribute)
            var list = this.SpecsList[i].value;
            if (this.attribute) {
                if (list.indexOf(this.attribute) != -1) {
                    return alert("已存在")
                } else {
                    this.SpecsList[i].value.push(this.attribute);
                }
            } else {
                alert("不能为空")
            }
            console.log(this.SpecsList)
            this.attribute = ''
        },
        //勾选参数
        checkboxChange() {
            var that = this;
            var SpecsList = that.SpecsList;
            var attrArr = [];
            for (var i = 0; i < SpecsList.length; i++) {
                if (SpecsList[i].checkedAttr.length > 0) {
                    var key = SpecsList[i].key;
                    var obj = {
                        'key': key,
                        "value": SpecsList[i].checkedAttr
                    }
                    attrArr.push(obj)
                }
            };
            that.checkedAttr = attrArr;
            if (attrArr.length > 0) {
                that.setTableData(attrArr)
            }
        },
        //表格数据处理
        setTableData(attrArr) {
            var that = this;
            let list = attrArr;
            const reducer = (accumulator, currentValue) => {
                var data = [];
                // console.log(accumulator, currentValue, '//////')
                if (accumulator.length) {
                    accumulator.forEach(element => {
                        currentValue.value.forEach(value => {
                            let obj = {};
                            for (var el in element) {
                                // console.log(el + "...." + element[el]);
                                let key = currentValue.key;
                                obj[key] = value;
                                obj[el] = element[el];
                                obj['price'] = '';
                                obj['stock'] = '';
                            }
                            data.push(obj)

                        })
                    })
                } else {
                    accumulator.value.forEach(el => {
                        currentValue.value.forEach(value => {
                            let obj = {};
                            let key = accumulator.key;
                            obj[key] = el;
                            let key1 = currentValue.key;
                            obj[key1] = value;
                            obj['price'] = '';
                            obj['stock'] = '';
                            data.push(obj)
                        })
                    })
                }
                return that.SkuData = data
            };
            if (list.length == 1) {
                // console.log(list);
                var data = [];
                for (var i = 0; i < list[0].value.length; i++) {
                    var obj = {};
                    var key = list[0].key;
                    obj[key] = list[0].value[i];
                    obj['price'] = '';
                    obj['stock'] = '';
                    data.push(obj)
                }
                that.SkuData = data
            } else {
                that.SkuData = list.reduce(reducer);
            }
        },
        
    }

})